<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>INCAKE | 蛋糕馆</title>
	<script type="text/javascript" src="/lib/requirejs/require.js" data-main="/js/list"></script>
	<link rel="stylesheet" type="text/css" href="/css/base.css">
	<link rel="stylesheet" type="text/css" href="/css/list.css">
	<style type="text/css">
		.cake-list{
			position: relative;
			z-index: 998;
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
		}
		.product{
			position: relative;
			width: 291px;
			margin: 0 0 10px 0;
			overflow: hidden;
		}
		.product:hover{
			outline: 1px solid #e9546b;
		}
		.product:hover .img a #img-favor{
			display: block;
		}
		.img{
			position: relative;
			width: 291px;
			height: 291px;
			overflow: hidden;
		}
		.img a{
			display: block;
			width: 100%;
			height: 100%;
			position: relative;
			background-repeat: no-repeat;
			background-size: cover;
			background-position: 50%;
		}
		#img-favor{
			display: inline-block;
			position: absolute;
			top: 15px;
			left: 15px;
			z-index: 99;
			width: 30px;
			height: 30px;
			border-radius: 50%;
			overflow: hidden;
			background-image: url(../imgs/img-favor.png);
			background-repeat: no-repeat;
			background-size: cover;
			background-position: 50%;
			display: none;
		}
		#img-favor:hover{
			background-image: url(../imgs/img-favor-hover.png);
		}
		.text{
			position: relative;
			width: 100%;
			height: 109px;
		}
		.text p{
			margin-left: 20px;
			color: #635859;
		}
		.text .desc{
			padding: 14px 0 11px;
			font-size: 14px;
			color: #b5b5b5;
			overflow: hidden;
		}
		.cn{
			padding-top: 10px;
			font-size: 14px;
			line-height: 30px;
		}
		.en{
			font-size: 10px;
			line-height: 30px;
		}
		.attr{
			padding-top: 5px;
			color: #e9546b;
		}
		.price{
			font-size: 14px;
			color: #e9546b;
		}
		.weight{
			font-size: 12px;
		}
		.add-cart{
			display: block;
			position: absolute;
			right: 20px;
			bottom: 15px;
			width: 28px;
			height: 28px;
			background-image: url(../imgs/add-cart.png);
			background-repeat: no-repeat;
			background-size: cover;
			background-position: 50%;
		}
	</style>
</head>
<body>
	<header></header>
	<div class="list-page" id="listPage">
		<div class="page-container">
			<ul class="list-nav">
				<li class="first-nav">
					<div class="title">商品</div>
					<div class="content">
						<a href="javascript:;" class="all">全部</a>
						<a href="javascript:;">芝士系列</a>
						<a href="javascript:;">巧克力系列</a>
						<a href="javascript:;">拿破仑系列</a>
						<a href="javascript:;">慕斯系列</a>
						<a href="javascript:;">乳脂系列</a>
						<a href="javascript:;">选拼系列</a>
					</div>
				</li>
				<li class="last-nav">
					<div class="title">口味</div>
					<div class="content">
						<a href="javascript:;">拿破仑</a>
						<a href="javascript:;">水果</a>
						<a href="javascript:;">芝士</a>
						<a href="javascript:;">巧克力</a>
						<a href="javascript:;">慕斯</a>
						<a href="javascript:;">咖啡</a>
						<a href="javascript:;">鲜奶</a>
						<a href="javascript:;">无糖</a>
					</div>
				</li>
			</ul>
			<ul class="cake-list" id="cakeList">
				<!-- 渲染商品数据 -->
			<script type="text/html" id="list_template">
				{{each list prod}}
				<li class="product">
					<div class="img">
						<a href="/html/detail.html?id={{prod.id}}" class="list-img" style="background-image: url({{prod.img}});">
							<span id="img-favor"></span>
						</a>
					</div>
					<div class="text">
						<p class="desc">{{prod.desc}}</p>
						<p class="name"><span class="cn">{{prod.cn}}</span><span class="en"> {{prod.en}}</span></p>
						<p class="attr"><span class="price">￥{{prod.price}}</span><span class="weight"> /{{prod.weight}}磅</span></p>
						<a href="#" class="add-cart"></a>
					</div>
				</li>
				{{/each}}
			</script>
			</ul>
		</div>
	</div>
	<footer></footer>
</body>
</html>